<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="index.css">
    <link rel="shortcut icon" href="image/favicon.ico">
</head>

<body>
    <input type="text">
    <!--顶部导航start-->
    <div class="shortcut">
        <!--版心-->
        <div class="w">
            <!--左浮动区域-->
            <div class="fl">
                <div class="dt"> 送至：北京
                    <i><s>◇</s></i>
                </div>
            </div>
            <!--右浮动区域-->
            <div class="fr">
                <ul>
                    <li>
                        <a href="#">你好，请登录</a> &nbsp;&nbsp;
                        <a href="#" class="col-red">免费注册</a>
                    </li>
                    <li class="line"></li>
                    <li>我的订单</li>
                    <li class="line"></li>
                    <li class="fore">我的京东
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li>京东会员</li>
                    <li class="line"></li>
                    <li>企业采购</li>
                    <li class="line"></li>
                    <li class="fore tel-jd">
                        <em class="tel"></em> <!--小手机图标-->
                        手机京东
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li class="fore">
                        关注京东
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li class="fore">
                        客户服务
                        <i><s>◇</s></i>
                    </li>
                    <li class="line"></li>
                    <li class="fore">
                        网站导航
                        <i><s>◇</s></i>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <!--顶部导航end-->
    <!-- banner -->
    <div class="topbanner">
        <div class="w tb">
            <img src="image/20180122_1020.png" alt="">
            <a href="javascript:;" class="close-banner"></a>
        </div>
    </div>
    <!-- banner-end -->
    <!-- 搜索框 -->
    <div class="search">
        <div class="w clearfix">
            <div class="search-logo">
                <a href="http://www.jd.com/" title="京东" target="_blank">京东官网</a>
            </div>
            <div class="search-input">
                <input type="text" value="运动相机" />
                <button>搜索</button>
            </div>
            <div class="search-car">
                <a href="#">我的购物车</a>
                <i class="icon1"></i>
                <i class="icon2">>&gt;</i>
                <i class="icon3">8</i>
            </div>
            <div class="search-moreAlink">
                <a href="#" class="col-red">出境999</a>
                <a href="#">沸腾厨卫</a>
                <a href="#">249减100</a>
                <a href="#">手机节</a>
                <a href="#">每150减50</a>
                <a href="#">男靴</a>
                <a href="#">巧克力</a>
                <a href="#">cool1手机</a>
                <a href="#">男士卫衣</a>
            </div>
        </div>
    </div>
    <!-- search-end -->


    <!-- 底部口号 -->
    <div class="slogen">
        <span class="item slogen1">
            <img src="images/slogen1.png" alt="">
        </span>
        <span class="item slogen2">
            <img src="images/slogen2.png" alt="">
        </span>
        <span class="item slogen3">
            <img src="images/slogen3.png" alt="">
        </span>
        <span class="item slogen4">
            <img src="images/slogen4.png" alt="">
        </span>
    </div>
    <!-- 底部口号-end -->
    <!-- 商品分类 -->
    <div class="shortcut-nav">
        <div class="w">
            <div class="shortcut-nav-menu">
                <div class="shortcut-nav-menu-all">
                    <a href="#">全部商品分类</a>
                </div>
                <!-- 具体的商品分类 -->
                <div class="shortcut-nav-menu-one" style="color: #fff;">
                    <ul>
                        <li>
                            <a href="#">家用电器</a>
                            <i>></i>
                        </li>
                        <li>
                            <a href="">手机</a>
                            <span>、</span>
                            <a href="">数码</a>
                            <i>></i>
                        </li>
                        <li>
                            <a href="">电脑</a>
                            <span>、</span>
                            <a href="">办公</a>
                            <i>></i>

                        </li>
                        <li>
                            <a href="">家居</a>
                            <span>、</span>
                            <a href="">家具</a>
                            <i>></i>
                        </li>
                        <li>
                            <a href="">男装</a>
                            <span>、</span>
                            <a href="">女装</a>
                            <i>></i>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <!-- 具体的商品分类-end -->
            </div>
            <div class="shortcut-nav-items">
                <ul>
                    <li><a href="#">服装城</a></li>
                    <li><a href="#">美妆馆</a></li>
                    <li><a href="#">京东超市</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">全球购</a></li>
                    <li><a href="#">闪购</a></li>
                    <li><a href="#">团购</a></li>
                    <li><a href="#">拍卖</a></li>
                    <li><a href="#">金融</a></li>
                </ul>
            </div>
            <div class="shortcut-nav-igm">
                <a href="#"><img src="image/favicon.ico" alt=""></a>
            </div>

        </div>

    </div>
    <!-- 商品分类-end -->
    <!--main部分start-->
    <div class="main">
        <div class="w">
            <div class="main-slider">
                <a href="">
                    <img src="image/q.jpg" alt="">
                </a>

                <ul> <!--指示点-->
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
                <a href="javascript:;" class="arrow-left">&lt;</a> <!--左边的箭头-->
                <a href="javascript:;" class="arrow-right">&gt;</a> <!--右边的箭头-->
            </div>
            <div class="main-news">
                <div class="main-news-top"> <!--京东快报+充话费-->
                    <div class="main-news-top-faster"> <!--京东快报-->
                        <div class="main-news-top-faster-title">
                            <h2>京东快报</h2>
                            <a href="#">更多 ></a>
                        </div>
                        <div class="main-news-top-faster-content">
                            <ul>
                                <li><span>[特惠]</span>新闻1</li>
                                <li><span>[公告]</span>新闻2</li>
                                <li><span>[特惠]</span>新闻3</li>
                                <li><span>[公告]</span>新闻4</li>
                                <li><span>[特惠]</span>新闻5</li>
                            </ul>

                        </div>
                    </div>
                    <div class="main-news-top-money"> <!--充话费-->
                        <ul>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i class="main-news-top-money-icon2"></i> <!--单元格里的图片-->
                                    <span>机票</span>
                                </a>

                            </li>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i></i> <!--单元格里的图片-->
                                    <span>话费</span>
                                </a>
                            </li>
                        </ul>

                    </div>

                </div>
                <div class="main-news-bottom">

                </div>
            </div>
        </div>
    </div>
    <!--main部分end-->
    <!--今日推荐start-->
    <div class="today">
        <div class="w clearfix">
            <div class="today-left fl">
                <a href=""></a>
            </div>

            <div class="today-right">
                <ul>
                    <li><a href=""><img src="images/today1.jpg" alt=""></a></li>
                    <li><a href=""><img src="images/today2.jpg" alt=""></a></li>
                    <li><a href=""><img src="images/today3.jpg" alt=""></a></li>
                    <li><a href=""><img src="images/today4.jpg" alt=""></a></li>
                </ul>
                <a href="javascript:;" class="arrow-left">&lt;</a> <!--左边的箭头-->
                <a href="javascript:;" class="arrow-right">&gt;</a> <!--右边的箭头-->

            </div>

        </div>
    </div>
    <!--今日推荐end-->
    <!-- 购物指南 -->
    <div class="w footer-shopping clearfix">
        <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
        </dl>
        <dl>
            <dt>配送方式</dt>
            <dd><a href="#">上门自提</a></dd>
            <dd><a href="#">211限时达</a></dd>
            <dd><a href="#">配送服务查询</a></dd>
            <dd><a href="#">配送费收取标准</a></dd>
            <dd><a href="#">海外配送</a></dd>
        </dl>
        <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
        </dl>
        <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
        </dl>
        <dl class="last-dl">
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
        </dl>
        <!-- 覆盖区域 -->
        <div class="coverage">
            <h3>京东自营覆盖区县</h3>
            <p>京东已向全国2654个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
            <a href="#">查看详情 ></a>
        </div>
        <!-- 覆盖区域-end -->

    </div>
    <!-- 购物指南-end -->

</body>

</html>